<template>
  <div>
    <TableSearch
      ref="tableSearch"
      :tableBtns="tableBtns"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    >
    </TableSearch>
    <AddFZPersonDlg
      v-if="addDlgVisible"
      :visible.sync="addDlgVisible"
      :type-options="typeOptions"
      :type="dlgType"
      :select-staff="selectStaff"
      @refresh="refresh"
    />
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import AddFZPersonDlg from './Dialogs/AddFZPersonDlg'
import { fzPersonList, listStaffRoles, deleteFZPerson } from '@/api/user'
import formatter from '@/utils/format'
export default {
  name: 'StaffList',
  components: { TableSearch, AddFZPersonDlg },
  mounted() {
    console.log(formatter)
    listStaffRoles().then((res) => {
      if (Array.isArray(res)) {
        let tempArr = []
        res.forEach((item) => {
          const temp = {
            label: item.showName,
            value: item.id,
            explanation: item.explanation,
          }

          tempArr.push(temp)
        })

        this.staffRoles = tempArr
        console.log(this.staffRoles)
      }
    })
  },
  data() {
    return {
      loading: false,
      addDlgVisible: false,
      staffRoles: [],
      typeOptions: [
        { label: '支付宝', value: 'ALIPA_SPLIT' },
        { label: '不分账', value: 'NOT_SPLIT' },
        { label: '微信', value: 'WECHAT_SPLIT' },
      ],
      dlgTitle: '添加用户',
      dlgType: 'add',
      selectStaff: {},
      columns: [
        {
          label: '运营商名称',
          prop: 'merchantName',
          // resourceId: '/web/user-management/staff-management/代理商名称',
        },
        {
          label: '运营商电话号码',
          prop: 'merchantPhoneNum',
          // resourceId: '/web/user-management/staff-management/代理商名称',
          width: 140,
        },
        {
          label: '运营商分账比例',
          prop: 'merchantProportion',
          width: 140,
        },
        {
          label: '分账人名称',
          prop: 'partnerName',
        },
        {
          label: '分账人账号',
          prop: 'partnerAccount',
        },
        {
          label: '分账比例',
          prop: 'partnerProportion',
        },
        {
          label: '平台分账比例',
          prop: 'platformProportion',
        },
        {
          label: '分账人手机号',
          prop: 'partnerPhoneNum',
        },
        {
          label: '类型',
          prop: 'splitType',
          formatter,
        },
        {
          label: '操作',
          resourceId: '/web/user-management/staff-management/操作',
          buttons: [
            {
              label: '编辑',
              size: 'small',
              class: 'table-button-green',
              resourceId: '/web/user-management/staff-management/编辑',
              click: (row) => {
                this.selectStaff = {
                  ...row,
                }

                this.dlgType = 'edit'
                this.addDlgVisible = true
              },
            },
            {
              label: '删除',
              size: 'small',
              class: 'table-button-red',
              resourceId: '/web/user-management/staff-management/删除',
              click: (row) => {
                this.handleDelete(row)
              },
            },
          ],
        },
      ],
      tableData: {},
      form: {},
      tableBtns: [
        {
          label: '新增',
          click: this.handleAdd,
          icon: 'el-icon-plus',
          resourceId: '/web/user-management/staff-management/新增',
        },
      ],
      searchPath: '/web/user-management/staff-management/查询',
      formItemsInline: [
        {
          type: 'text',
          value: 'userName',
          placeholder: '姓名',
          clearable: true,
          resourceId: '/web/user-management/staff-management/姓名',
        },
        {
          type: 'text',
          value: 'mobile',
          placeholder: '手机号',
          clearable: true,
          resourceId: '/web/user-management/staff-management/手机号',
        },
      ],
    }
  },
  methods: {
    handleAdd() {
      this.dlgType = 'add'
      this.selectStaff = {}
      this.addDlgVisible = true
    },
    handleTableData(params) {
      fzPersonList(params).then((res) => {
        this.tableData = {
          list: res.list,
          totalCount: res.totalAmount,
        }
      })
    },
    handleDelete(row) {
      deleteFZPerson({
        id: row.id,
      }).then((res) => {
        if (res) {
          this.$message.success('删除成功')
          this.refresh()
        }
      })
    },
    reset() {
      this.form = {}
    },
    refresh() {
      this.$refs.tableSearch.refreshTable()
    },
  },
}
</script>
